<template>
  <el-drawer v-model="state.open" destroy-on-close :title="this.state.type==='CENCI'?'层次':(this.state.type==='ZHUANYE'?'专业':'科目')" @close="close" @open="open">
    <template #default>
      <el-tabs style="margin-bottom: 15px;" type="border-card">
        <el-form ref="editForm" :model="data" :rules="rules" label-width="auto">
          <el-tab-pane :label="(this.state.type==='CENCI'?'层次':(this.state.type==='ZHUANYE'?'专业':'科目')) +'信息'">
            <el-form-item label="名称" prop="name">
              <el-input v-model.trim="data.name" clearable/>
            </el-form-item>
            <el-form-item v-if="this.state.type==='KEMU'" label="编码" prop="code">
              <el-input v-model.trim="data.code" clearable placeholder="编码相同的科目使用相同的题库"/>
            </el-form-item>
          </el-tab-pane>
        </el-form>
      </el-tabs>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
        <el-popconfirm v-if="state.id" cancel-button-text="否" confirm-button-text="是" title="确定删除该层次?" width="250" @confirm="del">
          <template #reference>
            <el-button type='danger'>删除</el-button>
          </template>
        </el-popconfirm>
        <el-button v-if="state.id" type="warning" @click="upsert">更新</el-button>
        <el-button v-else type="primary" @click="upsert">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>

export default {
  name: "Create",
  props: ['state'],
  data() {
    return {
      data: {},
      rules: {
        name: [
          {
            required: true, trigger: ['change', 'blur'], validator: (_, value, callback) => {
              if (!value) return callback(new Error('请输入名称'))
              callback()
            }
          }
        ],
        code: [
          {
            required: true, trigger: ['change', 'blur'], validator: (_, value, callback) => {
              if (!value) return callback(new Error('请输入编码'))
              callback()
            }
          }
        ]
      }
    }
  },
  methods: {
    async open() {
      if (this.state.id) {
        this.data = await this.post('/basic/get', {id: this.state.id})
      }
    },
    async upsert() {
      await this.$refs['editForm'].validate(async (valid, fields) => {
        if (!valid) return
        await this.post('/basic/upsert', {
          id: this.state.id,
          type: this.state.type,
          parentId: this.state.parentId,
          name: this.data.name,
          code: this.data.code,
        });
        this.$emit('updated', {del: false})
        this.close()
      })
    },
    async del() {
      await this.post('/basic/delete', {
        id: this.state.id,
      });
      this.$emit('updated', {del: true, id: this.state.id})
      this.close()
    },
    close() {
      this.state.open = false
      this.$refs['editForm'].resetFields()
    },
  }
}
</script>

<style scoped>
:deep(.cm-scroller) {
  min-height: calc(100vh - 520px);
}
</style>